/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from "react";
import {Dimensions, StyleSheet, View,Animated,Text,Image,TouchableOpacity} from "react-native";

var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
import Global from "../Commom/GlobalConst";
export default class ShowView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            height: new Animated.Value(0),
        };
    }


    componentDidMount() {

    }
    showBottomView() {
        Animated.timing(
            this.state.height,
            {

                toValue: 105,
                duration: 250,
            }
        ).start();
        this.setState({
            isShow: true,
        })
    }

    hideBottomView() {
        Animated.timing(
            this.state.height,
            {
                toValue: 0,
                duration: 250,
            }
        ).start();
        this.setState({
            isShow: false,
        })
    }
    onClick(id){
        this.props.onClick(id);
    }
    render () {
        return (
            <View style={styles.container}>
                <Animated.View style={{width:110,height: this.state.height,overflow:'hidden'}}>
                    <View style={{width:110,height:105,backgroundColor:'white',borderRadius:5}}>
                        <TouchableOpacity
                                          activeOpacity={0.5}
                                          onPress={()=>this.onClick(0)}>
                            <View style={{flexDirection:'row',height:35,width:110,justifyContent:'center',alignItems:'center',borderBottomWidth:1,borderColor:Global.Const.transparent}}>
                                <Image style={{width:17,height:17,resizeMode:'contain'}}
                                       source={require('../../Image/new/icon_by_car_01.png')}/>
                                <Text style={{color:'#24CD78',marginLeft:8}}>自驾约伴</Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={0.5}
                            onPress={()=>this.onClick(1)}>
                            <View style={{flexDirection:'row',height:35,width:110,justifyContent:'center',alignItems:'center',borderBottomWidth:1,borderColor:Global.Const.transparent}}>
                                <Image style={{width:17,height:17,resizeMode:'contain'}}
                                       source={require('../../Image/new/icon_q_a_02.png')}/>
                                <Text style={{marginLeft:8}}>有问必答</Text>
                            </View>
                        </TouchableOpacity>
                        {/*<TouchableOpacity*/}
                            {/*activeOpacity={0.5}*/}
                            {/*onPress={()=>this.onClick(2)}>*/}
                            {/*<View style={{flexDirection:'row',height:35,width:110,justifyContent:'center',alignItems:'center',borderBottomWidth:1,borderColor:Global.Const.transparent}}>*/}
                                {/*<Image style={{width:17,height:17,resizeMode:'contain'}}*/}
                                       {/*source={require('../../Image/new/icon_shopping_02.png')}/>*/}
                                {/*<Text style={{marginLeft:8}}>帮      购</Text>*/}
                            {/*</View>*/}
                        {/*</TouchableOpacity>*/}
                        <TouchableOpacity
                            activeOpacity={0.5}
                            onPress={()=>this.onClick(3)}>
                            <View style={{flexDirection:'row',height:35,width:110,justifyContent:'center',alignItems:'center'}}>
                                <Image style={{width:17,height:17,resizeMode:'contain'}}
                                       source={require('../../Image/new/icon_tourism_02.png')}/>
                                <Text style={{marginLeft:8}}>游      记</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </Animated.View>
            </View>
        );
    }

}
const styles = StyleSheet.create({
    container: {
        backgroundColor: 'rgba(0,0,0,0)',
        flex: 1,
        position: 'absolute',
        bottom: 75,
        right: 18,
    },
});

